<!--
author blueSuMMer
-->
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>

<html lang="en">


<head>
    <title>码上！</title>
    <!-- for-mobile-apps -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords"
          content="Logistic Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design"/>

    <%--jq--%>
    <script src="${pageContext.request.contextPath}/static/jquery/jquery-3.5.1.js" type="text/javascript"></script>
    <%--    laiui 框架--%>
    <script src="${pageContext.request.contextPath}/static/layui/layui.js" type="text/javascript"
            charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/layui/css/layui.css"/>
    <%--    bootstrap 框架--%>
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.js" type="text/javascript"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.css" type='text/css'>

    <%--    font-awesome 图标库--%>
    <link href="${pageContext.request.contextPath}/front/css/font-awesome.min.css" type="text/css" rel="stylesheet">
    <%--    百度地图API--%>
    <%--    <script type="text/javascript"--%>
    <%--            src="http://api.map.baidu.com/api?v=3.0&ak=lewICX42RZIlfELxB6dG81zz5W1juYc6"></script>--%>
    <%--    高德地图API--%>
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15&key=5702b4a78aee7e6d4704e647d45a5e5d&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.DistrictSearch,AMap.Geolocation"></script>
    <%--    项目 css--%>
    <link href="${pageContext.request.contextPath}/front/css/style.css" rel="stylesheet" type="text/css"/>
    <style>
        .carousel-inner:before {
            z-index: 1;
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            opacity: 0.45;
            background: #000;
        }

        header {
            position: absolute;
            z-index: 9;
            width: 100%;
        }
    </style>
</head>

<body>
<div class="menu_sub">

</div>
<div class="layui-circle layui-anim layui-anim-scaleSpring"
     style="position: fixed; z-index: 100;right: 50px;bottom: 50px;">

    <a href="#header" class="fa fa-4x fa-arrow-circle-o-up mx-auto text-primary"></a>
</div>

<!-- //header -->
<header id="header" style="z-index: 51" class="pb-2">
    <div class="mx-auto d-flex pt-3 w-75">
        <!-- top header -->
        <%--        <div class="d-flex pt-3">--%>
        <div id="logo" class="align-self-center">
            <h1>
                <a href="${pageContext.request.contextPath}/index.jsp" style="text-shadow: 2px 2px black">码上物流</a>
            </h1>
        </div>
        <div class="align-self-center ml-5">
            <nav class="nav pt-2">
                <ul class="mt-2">
                    <li class="mr-4 mr-2">
                        <a href="${pageContext.request.contextPath}/front/about.jsp">About Us</a>
                    </li>
                    <li class="mr-4 mr-2">
                        <a href="${pageContext.request.contextPath}/front/services.html">Services</a>
                    </li>
                    <li class="mr-3 mr-2 p-0">
                        <!-- First Tier Drop Down -->
                        <label for="drop-2" class="toggle">Dropdown<span class="fa fa-angle-down"
                                                                         aria-hidden="true"></span>
                        </label>
                        <a href="#">Dropdown <span class="fa fa-angle-down" aria-hidden="true"></span></a>
                        <input type="checkbox" id="drop-2"/>
                        <ul class="inner-dropdown rounded">
                            <li>
                                <a href="${pageContext.request.contextPath}/front/gallery.html">Our Gallery</a>
                            </li>
                            <li>
                                <a href="${pageContext.request.contextPath}/front/error.html">404 Error Page</a>
                            </li>
                            <li>
                                <a href="#">Add Link</a>
                            </li>
                        </ul>
                    </li>
                    <li class="mr-4 mr-2">
                        <a href="${pageContext.request.contextPath}/front/contact.html">Contact</a>
                    </li>
                    <li class="">
                        <a href="#subscribe">关于我们</a>
                    </li>
                </ul>
            </nav>
        </div>
        <div id="userDiv" class="ml-auto top-grid d-flex">
            <%--            <div class="d-flex w-100 p-2">--%>
            <%--                <a href="javascript:void(0)" class=" align-self-end ml-auto text-white" style="color: white"--%>
            <%--                   onclick="doFastLogin()">未登录</a>--%>
            <%--                <a href="javascript:void(0)" class="align-self-end" onclick="doFastLogin()">--%>
            <%--                    <span class="fa ml-3 fa-user-circle-o text-light"></span>--%>
            <%--                </a>--%>
            <%--            </div>--%>

            <%--======================================================--%>
            <%--            <nav class="nav w-100">--%>
            <%--                <ul class="w-100 nav justify-content-end">--%>
            <%--                    <li class="rounded-top">--%>
            <%--                        <div class="d-flex p-2">--%>
            <%--                            <a class="p-0 mr-3 align-self-end text-white">名sdssfsdfd </a>--%>
            <%--                            <img src="front/images/manager.jpg" class="layui-circle" height="47" width="47">--%>
            <%--                        </div>--%>
            <%--                        <ul class="inner-dropdown rounded pl-2 pr-2 mx-auto"--%>
            <%--                            style="z-index: 1;width: 200px;margin-left:110px;">--%>
            <%--                            <li>--%>
            <%--                                <a href="${pageContext.request.contextPath}/front/gallery.html">个人中心</a>--%>
            <%--                            </li>--%>
            <%--                            <li>--%>
            <%--                                <a href="${pageContext.request.contextPath}/front/error.html">退出</a>--%>
            <%--                            </li>--%>
            <%--                        </ul>--%>
            <%--                    </li>--%>
            <%--                </ul>--%>
            <%--            </nav>--%>
            <%--======================================================================--%>
        </div>
        <div class="d-flex ml-3 pb-2">
            <a href="javascript:void(0)" class="city text-white align-self-end"></a>
            <a href="javascript:void(0)" onclick="detectLocation()"
               class="fa fa-2x fa-map-marker ml-3 location-icon align-self-end"></a>
        </div>
        <%--        </div>--%>
        <!-- top header -->
        <!-- nav -->

        <!-- //nav -->
    </div>
</header>
<!-- //header -->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="height: 600px;">
    <div class="banner-text position-absolute w-100 layui-anim layui-anim-scaleSpring" style="z-index: 10">
        <div class="slider-info">
            <div class="agileinfo-logo mt-lg-5">

                <h2 style="text-shadow: 2px 2px 2px black;">码上快递<br>实时信息实时知</h2>

                <a href="${pageContext.request.contextPath}/front/order.jsp" target="_blank">马上寄快递！</a>

            </div>
        </div>
    </div>
    <div class="choose justify-content-around text-center position-absolute d-flex" style="z-index: 10">
        <a href="${pageContext.request.contextPath}/front/houses.jsp" class="choose-icon">
            <span class="fa fa-map-marker" aria-hidden="true"></span>
            <div class=" choose-grid">
                <h3 class="mt-4">网点</h3>
                <p class="">遍布全国1000+网点</p>
            </div>
        </a>
        <a href="${pageContext.request.contextPath}/front/track.jsp" class="choose-icon">
            <span class="fa fa-truck" aria-hidden="true"></span>
            <div class="choose-grid">
                <h3 class="mt-4">物流信息</h3>
                <p class="">快速查询物流信息</p>
            </div>
        </a>
        <a href="javascript:void(0)" class="choose-icon">
            <span class="fa fa-cny" aria-hidden="true"></span>
            <div class="choose-grid">
                <h3 class="mt-4">运费查询</h3>
                <p class="">费用明晰避免尴尬</p>
            </div>
        </a>
        <a href="javascript:void(0)" class="choose-icon">
            <span class="fa fa-globe" aria-hidden="true"></span>
            <div class="choose-grid">
                <h3 class="mt-4">Air Freight</h3>
                <p class="">Shipping via Air.</p>
            </div>
        </a>
        <a href="javascript:void(0)" class="choose-icon">
            <span class="fa fa-globe" aria-hidden="true"></span>
            <div class="choose-grid">
                <h3 class="mt-4">Land Freight</h3>
                <p class="">Shipping via vehicles.</p>
            </div>
        </a>
        <div class="clearfix"></div>
    </div>
    <div class="carousel-inner">
        <div class="carousel-item active" style="height:600px">
            <img src="front/images/banner.jpg" class="d-block w-100" style="margin-top:-300px;" alt="...">
        </div>
        <div class="carousel-item" style="height:600px">
            <img src="front/images/10170137_889656.jpg" class="d-block w-100" style="margin-top:-300px;" alt="...">
        </div>
        <div class="carousel-item" style="height:600px">
            <img src="front/images/4875-fyrcsrv8762382.jpg" class="d-block w-100" style="margin-top:-300px;" alt="...">
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"
       style="z-index: 10">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"
       style="z-index: 10">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
<!-- banner -->
<div class="clearfix"></div>
<!-- //banner -->

<!-- about -->
<section class="about mt-5" id="how">
    <div class="container py-lg-5">
        <div class="row about-grids">
            <div class="col-lg-6 about-left">
                <img src="front/images/about.jpg" alt="" class="img-fluid"/>
            </div>
            <div class="col-lg-6 grid1 mt-lg-0 mt-4 pl-lg-5">
                <h3 class="my-lg-4 mb-2">Ship Anything Around the World</h3>
                <p class="">Integer pulvinar leo id viverra feugiat. Pellentesque libero ut justo, semper at tempus vel,
                    ultrices in ligula. Nulla sollicit udin velit. semper at tempus vel, ultrices in ligula leo sed
                    viverra feugiat Nulla sollicit udin velit.</p>
                <p class="mt-3">Integer pulvinar leo id viverra feugiat. Pellentesque libero justo, semper at tempus
                    vel, ultrices in ligula. Integer pulvinar leo id viverra feugiat. Pellentesque libero justo, semper
                    at tempus vel, ultrices in ligula. Nulla sollicit.
                </p>
            </div>
        </div>
    </div>
</section>
<!-- //about -->

<!-- services -->
<section class="services py-5 bg-clr" id="services">
    <div class="container py-lg-5">
        <div class="row mt-lg-5">
            <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 mb-md-0 mb-4">
                <h4 class="heading mt-3 ml-3">We Provide Safe & Secure Shipping Services around the world</h4>
            </div>
            <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
                <div class="our-services-wrapper mb-60">
                    <div class="services-inner">
                        <a href="javascript:void(0)">
                            <div class="our-services-text">
                                <h4>Sea freight</h4>
                                <p>Proin varius pellentesque nunc ut ipsum tincidunt ante. Init id lacus sed semper at
                                    tempus vel.</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
                <div class="our-services-wrapper mb-60">
                    <a href="javascript:void(0)">
                        <div class="services-inner">

                            <div class="our-services-text">
                                <h4>Truck Transport</h4>
                                <p>Proin varius pellentesque nunc ut ipsum tincidunt ante. Init id lacus sed semper at
                                    tempus vel.</p>
                            </div>
                        </div>
                    </a>
                </div>

            </div>
            <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
                <div class="our-services-wrapper mb-md-0 mb-60">
                    <a href="javascript:void(0)">
                        <div class="services-inner">

                            <div class="our-services-text">
                                <h4>Ocean Freight</h4>
                                <p>Proin varius pellentesque nunc ut ipsum tincidunt ante. Init id lacus sed semper at
                                    tempus vel.</p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
                <div class="our-services-wrapper mb-md-0 mb-60">
                    <a href="javascript:void(0)">
                        <div class="services-inner">

                            <div class="our-services-text">
                                <h4>Air Freight</h4>
                                <p>Proin varius pellentesque nunc ut ipsum tincidunt ante. Init id lacus sed semper at
                                    tempus vel.</p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
                <div class="our-services-wrapper">
                    <a href="javascript:void(0)">
                        <div class="services-inner">

                            <div class="our-services-text">
                                <h4>Land Freight</h4>
                                <p>Proin varius pellentesque nunc ut ipsum tincidunt ante. Init id lacus sed semper at
                                    tempus vel.</p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- //services -->

<!-- stats -->
<section class="stats py-5">
    <div class="container py-lg-5 py-md-3">
        <div class="row stat-grids">
            <div class="col-lg-5">
                <h4 class="heading mb-3">Logistics Statistical growth</h4>
                <p class="">Integer pulvinar leo id viverrra feugiat. Pellentesque libero ut justo, semper at tempus
                    vel, ultrices ipsum ligula. Nulla sollicit udin velit. semper at tempus vel, ultrices in ligula leo
                    sed viverra feugiat Nulla.</p>
            </div>
            <div class="col-lg-6 offset-lg-1 stats-right">
                <div class="row stats-inner-grid">
                    <div class="col-sm-6 col-6">
                        <h4>950</h4>
                        <p>Satisfied <br>Clients</p>
                    </div>
                    <div class="col-sm-6 col-6">
                        <h4>250+</h4>
                        <p>Branches <br>Worldwide</p>
                    </div>
                </div>
                <div class="row stats-inner-grid mt-5">
                    <div class="col-sm-6 col-6">
                        <h4>350</h4>
                        <p>Shipments <br>Completed</p>
                    </div>
                    <div class="col-sm-6 col-6">
                        <h4>100%</h4>
                        <p>Safe <br>Shipping</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- //stats -->

<!-- shipping -->
<section class="shipping py-5">
    <div class="container py-lg-5 py-md-3">
        <div class="row">
            <div class="col-lg-5 p-md-0">
                <img src="front/images/about.jpg" alt="" class="img-fluid"/>
            </div>
            <div class="col-lg-7 p-0 mt-lg-0 mt-4">
                <div class="shipping-right">
                    <h4 class="heading"> Your goods transport cost starts from 12$.</h4>
                    <p class="mt-3">Integer pulvinar leo id viveerrra feugiat. Pellenttesque libero ut justo, semper at
                        tempus vel, ultrices ipsum ligula. Nullae sollicit udin velit. semper at tempus vel pulvinar leo
                        id viverra feugiat semper at tempus ultrices ipsum pulvinar.</p>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- //shipping -->

<!--/Blog-Posts-->
<section class="banner-bottom-w3layouts py-5" id="blog">
    <div class="container">
        <div class="inner-sec-w3ls py-lg-5 py-md-3">
            <!--/services-grids-->
            <div class="row blog-sec">
                <div class="col-lg-4 manager-img mb-lg-0 mb-4">
                    <h4 class="heading"> We help clients transport their goods safely.</h4>
                    <p class="mt-4">Integer pulvinar leo id viveerrra feugiat. Pellenttesque libero ut justo, semper at
                        tempus vel, ultrices ipsum ligula. Nullae sollicit udin velit. semper at tempus vel.</p>
                    <img src="front/images/manager.jpg" alt="" class="img-fluid rounded-circle mt-3">
                    <img src="front/images/signature.jpg" alt="" class="img-fluid img1">
                </div>
                <div class="col-lg-4 col-md-6 about-in blog-grid-info text-left">
                    <div class="card img">
                        <div class="card-body img">
                            <img src="front/images/blog1.jpg" alt="" class="img-fluid">
                            <div class="blog-des mt-3">
                                <h5 class="card-title mt-4">Shipping Cargo Transport</h5>
                                <p class="card-text">Nulla eu elementum quam. Pellentesque consectetur magna purus, nec
                                    facilisis. semper at tempus vel, ipsum.
                                </p>
                                <a href="#"> Click More </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 about-in blog-grid-info text-left mt-md-0 mt-5">
                    <div class="card img">
                        <div class="card-body img">
                            <img src="front/images/blog2.jpg" alt="" class="img-fluid">
                            <div class="blog-des mt-3">
                                <h5 class="card-title mt-4">Shipping Cargo Transport</h5>
                                <p class="card-text">Nulla eu elementum quam. Pellentesque consectetur magna purus, nec
                                    facilisis. semper at tempus vel, ipsum.
                                </p>
                                <a href="#"> Click More </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--//Blog-Posts-->

<!-- footer-top -->
<section class="footer-top py-5">
    <div class="container">
        <div class="row footer-top-grid">
            <div class="col-sm-6">
                <h3>Contact Us</h3>
                <p>Call us, we are 24/7 Helpline</p>
            </div>
            <div class="col-sm-6 text-sm-right mt-sm-0 mt-3">
                <h3><span class="fa fa-phone" aria-hidden="true"></span> +11 2345 6789</h3>
            </div>
        </div>
    </div>
</section>
<!-- //footer-top -->

<!--footer -->
<div class="footer footer_w3layouts_section_1its py-5" id="subscribe">
    <div class="container pt-sm-4">
        <div class="row footer-grid">
            <div class="col-md-5 footer-grid_section_1its_w3">
                <div class="footer-title">
                    <h3>Who we are</h3>
                </div>
                <div class="footer-text">
                    <p>Curabitur non nulla sit amet nislinit tempus ipsum convallis quis ac lectus. lac inia eget
                        consectetur sed, convallis at tellus. Nulla porttitor accumsana tincidunt. Vestibulum ante ipsum
                        primis tempus.</p>
                    <ul class="social_section_1info">
                        <li>
                            <a href="#" class="w3_facebook"><i class="fa fa-facebook"></i></a>
                        </li>
                        <li>
                            <a href="#" class="w3_twitter"><i class="fa fa-twitter"></i></a>
                        </li>
                        <li>
                            <a href="#" class="w3_instagram"><i class="fa fa-instagram"></i></a>
                        </li>
                        <li>
                            <a href="#" class="w3_google"><i class="fa fa-google-plus"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-md-3 col-sm-5 footer-grid_section_1its_w3 mt-md-0 mt-4">
                <div class="footer-title">
                    <h3>Useful Links</h3>
                </div>
                <ul class="links">
                    <li>
                        <a href="${pageContext.request.contextPath}/front/about.jsp">About Our Company</a>
                    </li>
                    <li>
                        <a href="${pageContext.request.contextPath}/front/services.html">Logistics Services</a>
                    </li>
                    <li>
                        <a href="#">Terms & Conditions</a>
                    </li>
                    <li>
                        <a href="#">Privicy Policy</a>
                    </li>
                </ul>
            </div>
            <div class="col-md-4 col-sm-7 footer-grid_section_1its_w3 mt-md-0 mt-4">
                <div class="footer-title">
                    <h3>Subscribe</h3>
                </div>
                <div class="footer-text">
                    <p>By subscribing to our mailing list you will get latest news and updates from us.</p>
                    <form action="#" method="post">
                        <input type="email" name="Email" placeholder="Enter your email..."/>
                        <button class="btn1"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
                        <div class="clearfix"></div>
                    </form>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
        <!-- move top -->
        <div class="move-to-top text-center">
            <a href="#home" class="move-top"><span class="fa fa-angle-double-up" aria-hidden="true"></span></a>
        </div>
        <!-- //move top -->
        <div class="copyright">
            <p>© 2019 Logistic. All Rights Reserved | Design by
                <a href="http://w3layouts.com/">W3layouts</a>
            </p>
        </div>
    </div>
</div>

<!-- //footer -->
<script src="${pageContext.request.contextPath}/front/js/fastLogin.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/front/js/ipLocation.js" type="text/javascript"></script>
<script>
    $(function () {
        if ("${sessionScope.user.userId}" !== '') {
            loginUser = {};
            loginUser.userId = "${sessionScope.user.userId}";
            loginUser.userName = "${sessionScope.user.userName}";
            loginUser.userFace = "${sessionScope.user.userFace}";
            loginUser.uaerPhone = "${sessionScope.user.userPhone}";
        }
        detectLogin();
        detectLocation();
    })
    $(document).on('mouseover', '.fa-user-circle-o', function () {
        $(this).removeClass('fa-user-circle-o');
        $(this).addClass('fa-user-circle');
    })
    $(document).on('mouseout', '.fa-user-circle', function () {
        $(this).removeClass('fa-user-circle');
        $(this).addClass('fa-user-circle-o');
    })
</script>
</body>

</html>